<template>
  <div class="menu">
    <div id="main">
      <div id="top">
        <el-carousel :interval="4000" type="card" height="400px">
          <el-carousel-item v-for="img in 9" :key="img">
            <div class="medium">
              <img width="100%" height="400px" :src="getPic(img)" />
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="nybasetit grid-content">
        <h3>Hot list</h3>
        <span>热门榜单</span>
        <div class="yezi"></div>
      </div>
      <page></page>
    </div>
  </div>
</template>
<script>
import Page from "../components/Page.vue";
export default {
  components: {
    Page
  },
  methods: {
    //图片转换
    getPic(pic) {
      return require("../assets/images/meetmenu-LB" + pic + ".jpg");
    },
  }
};
</script>
<style>
.el-carousel{
  z-index: 0;
}
</style>
<style lang="css" scoped>
#main {
  width: 80%;
  margin: auto;
}

#top {
  width: 100%;
  height: 400px;
  margin: auto;
}

#foods {
  width: 100%;
  margin: 10px auto;
}

.nybasetit {
  text-align: center;
}

.nybasetit h3 {
  font-size: 42px;
  font-family: arial;
  color: #111;
  margin-top: 30px;
}

.nybasetit span {
  font-size: 16px;
  display: block;
}

.nybasetit img {
  margin: 30px 0;
}

#main .nybasetit .yezi {
  height: 40px;
  background: url(../assets/images/base1.png) no-repeat center;
  margin: 30px 0;
}

</style>